<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" style="height: auto; min-height: 100%;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Bootstrap-ecommerce by Vosidiy">

    <title>用户中心</title>

    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">

    <!-- jQuery -->
    <script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>

    <!-- Bootstrap4 files-->
    <script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link rel="stylesheet" href="/AdminLTE-2.4.12/bower_components/Ionicons/css/ionicons.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/AdminLTE-2.4.12/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Font awesome 5 -->
    <link href="fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

    <!-- plugin: owl carousel  -->
    <link href="plugins/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="plugins/owlcarousel/assets/owl.theme.default.css" rel="stylesheet">
    <script src="plugins/owlcarousel/owl.carousel.min.js"></script>

    <!-- custom style -->
    <link href="css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)" />

    <style>
        .orderLabel{
            width: 200px;
            border: solid;
            border-bottom-color:transparent;
            border-left-color:white;
            border-right-color:white;
            border-top-color:  white;
            border-width: 10px;
            background-color: #ffe084;
        }

    </style>
    <script src="js/deleteBr.js"></script>
</head>
<body>
<div th:replace="fragment::header"></div>

<section class="section-main bg padding-y-sm">
    <div class="container">
        <div class="row row-sm">
            <aside class="col-md-2" style="text-align: center">
                <br>
                <h5 class="text-uppercase">个人中心</h5>
                <ul class="menu-category">
                    <li> <a href="/userCenter"><i class="fa fa-book"></i> 个人信息  </a></li>
                    <li> <a href="/userCenter/RecAddress"><i class="fa fa-truck"></i> 收货信息 </a></li>
                    <li> <a href="#" style="color: #ffc107"><i class="fa fa-file-text"></i> 我的订单 </a></li>
                    <li> <a href="#"><i class="fa fa-user"></i> 会员中心 </a></li>
                    <li> <a href="#"><i class="fa fa-heart"></i> 收藏商品 </a></li>
                    <li> <a href="#"><i class="fa fa-thumbs-up"></i> 为您推荐 </a></li>

                </ul>

            </aside>
            <div class="card col-md-10">
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <td>
                                <div class="orderLabel">
                                    <div style="margin-top: 10px;">
                                        <label>&nbsp;&nbsp;下单日期:</label> <label style="float: right;margin-right: 5px;">2018-08-08</label>
                                    </div>
                                </div>
                                <table class="table shopping-cart-wrap" style="background-color: whitesmoke;">
                                    <thead class="text-muted">
                                    <tr>
                                        <th scope="col">商品</th>
                                        <th scope="col" width="120">数量</th>
                                        <th scope="col" width="120">总价</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="commodity,comStat:${commodityList}">
                                        <td>
                                            <figure class="media">
                                                <div class="img-wrap"><img src="/images/items/1.jpg" class="img-thumbnail img-sm">
                                                </div>
                                                <figcaption class="media-body">
                                                    <h6 style="white-space: normal" class="title text-truncate" th:text="${commodity.commName}" >Product name goes here </h6>
                                                    <dl class="dlist-inline small">
                                                        <dt>型号：</dt>
                                                        <dd>XXL</dd>
                                                    </dl>
                                                </figcaption>
                                            </figure>
                                        </td>
                                        <td>
                                            <span class="h5" th:text="${commInOrderList[comStat.index].commQuantity}">1</span>
                                        </td>
                                        <td>
                                            <div class="price-wrap">
                                                <var class="price" th:text="'￥'+${#numbers.formatDecimal(priceList[comStat.index],0,2)}">USD 145</var>
                                                <small class="text-muted"th:text="'单价：￥'+${#numbers.formatDecimal(commInOrderList[comStat.index].commPrice,0,2)}">(USD5 each)</small>
                                            </div> <!-- price-wrap .// -->
                                        </td>
                                    </tr>
                                    <br>
                                    <tr>
                                        <td style="font-size: 18px;">订单总价：<label class="price" th:text="'￥'+${#numbers.formatDecimal(order.orderTotalPrice,0,2)}">￥ 8888</label></td><td></td>
                                        <td>
                                            <a style="margin-top: 15px;" href="/commodity/Details/0" class="btn btn-outline-warning"> 查看订单详情 </a>
                                        </td>
                                    </tr>

                                    </tbody>
                                </table>
                                <br><br>
                            </td>
                        </tr>
                    </table>
                </div> <!-- card-body .// -->
            </div> <!-- card.// -->
        </div> <!-- row.// -->



    </div> <!-- container .//  -->
</section>


<div th:replace="fragment::footer"></div>
</body>
</html>




